// 日记数据
const diaryEntries = {
    1: {
        title: "探索CSS Grid布局",
        date: "2023-10-15",
        category: "CSS",
        content: `
            <p>今天深入学习了CSS Grid布局系统，发现它比Flexbox更适合二维布局。创建了一个响应式图库作为练习，效果非常不错。</p>
            <p>Grid布局的核心概念是容器和项目，通过定义行和列来创建网格结构。我最喜欢的功能是：</p>
            <ul>
                <li>fr单位：可以创建灵活的网格轨道</li>
                <li>grid-template-areas：可以通过命名区域来创建布局</li>
                <li>gap属性：轻松设置网格间隙</li>
            </ul>
            <p>还学习了一些高级技巧，如使用minmax()函数创建响应式网格，以及使用auto-fill和auto-fit自动填充网格。</p>
            <p>明天计划尝试将Grid与Flexbox结合使用，看看能创建出什么有趣的布局。</p>
        `
    },
    2: {
        title: "JavaScript闭包实践",
        date: "2023-10-10",
        category: "JavaScript",
        content: `
            <p>闭包是JavaScript中一个强大但容易混淆的概念。今天通过几个实际例子终于搞清楚了它的工作原理和应用场景。</p>
            <p>闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。</p>
            <p>我创建了几个使用闭包的例子：</p>
            <ul>
                <li>创建私有变量：通过闭包模拟私有方法和变量</li>
                <li>实现函数柯里化：使用闭包保存参数状态</li>
               li>事件处理程序：在循环中正确绑定事件</li>
            </ul>
            <p>最重要的是理解了闭包如何保持对外部函数变量的引用，即使外部函数已经执行完毕。</p>
            <p>需要注意闭包可能导致的内存泄漏问题，特别是在DOM元素上使用闭包时。</p>
        `
    },
    3: {
        title: "算法学习：二叉树遍历",
        date: "2023-10-05",
        category: "算法",
        content: `
            <p>复习了二叉树的三种遍历方式：前序、中序和后序。用JavaScript实现了递归和迭代两种解法。</p>
            <p>前序遍历：根节点 -> 左子树 -> 右子树</p>
            <p>中序遍历：左子树 -> 根节点 -> 右子树</p>
            <p>后序遍历：左子树 -> 右子树 -> 根节点</p>
            <p>递归实现相对简单，但迭代实现需要借助栈数据结构。我特别注意了代码的可读性和效率。</p>
            <p>还尝试解决了几个LeetCode上的二叉树问题：</p>
            <ul>
                <li>#94 二叉树的中序遍历</li>
                <li>#102 二叉树的层序遍历</li>
                <li>#104 二叉树的最大深度</li>
            </ul>
            <p>明天计划学习二叉搜索树及其操作。</p>
        `
    }
};

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const diaryCards = document.querySelectorAll('.diary-card');
    const diaryList = document.querySelector('.diary-list');
    const diaryDetail = document.querySelector('.diary-detail');
    const backBtn = document.querySelector('.back-btn');
    
    // 为每个日记卡片添加点击事件
    diaryCards.forEach(card => {
        const readMoreBtn = card.querySelector('.read-more');
        readMoreBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            showDiaryDetail(card.dataset.id);
        });
        
        card.addEventListener('click', function() {
            showDiaryDetail(card.dataset.id);
        });
    });
    
    // 返回按钮事件
    backBtn.addEventListener('click', function() {
        diaryDetail.classList.add('hidden');
        diaryList.classList.remove('hidden');
    });
    
    // 显示日记详情函数
    function showDiaryDetail(id) {
        const entry = diaryEntries[id];
        if (entry) {
            document.getElementById('detail-title').textContent = entry.title;
            document.getElementById('detail-date').textContent = entry.date;
            document.getElementById('detail-category').textContent = entry.category;
            document.getElementById('detail-content').innerHTML = entry.content;
            
            diaryList.classList.add('hidden');
            diaryDetail.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    }
});